
<template>
  <div style="height: 100%;display: flex;flex-direction: column">
    <el-row>
      <el-card style="width: 100%;">
        权限新增
        <span style="float: right">

            <el-button @click="()=>{router.push('/permission/list')}">回到列表页</el-button>
        </span>
      </el-card>
    </el-row>
    <el-row style="margin-top: 10px;flex: 1;display:flex;align-items: center;justify-content: center;">
      <el-card style="flex: 1;display: flex;justify-content: center">
        <el-form label-width="120px" :model="state.permissionAddInfo" ref="formRef" :rules="rules" >
          <el-form-item label="编码">
            <el-input v-model="state.permissionAddInfo.permissionCode"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="state.permissionAddInfo.permissionName"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="state.permissionAddInfo.desc"></el-input>
          </el-form-item>
          <el-form-item label="是否菜单">
            <el-radio-group v-model="state.permissionAddInfo.isMenu">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="权限类型">
            <el-radio-group v-model="state.permissionAddInfo.type" @change="onTypeChange">
              <el-radio :label="0">普通权限</el-radio>
              <el-radio :label="1">路由权限</el-radio>
              <el-radio :label="2">菜单权限</el-radio>
              <el-radio :label="3">接口权限</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="选择菜单" v-if="state.permissionAddInfo.type===2">
            <el-cascader
                         collapse-tags
                         collapse-tags-tooltip
                         clearable
                         style="width: 100%;"
                         @change="change"
                         :props="{value:'id',label:'title',lazy:true,lazyLoad:lazyLoadMenu,multiple:false}">
              <template #default="{ node, data }">
                <span>{{ data.title }} {{data.path}}</span>
              </template>
            </el-cascader>          </el-form-item>

          <el-form-item label="选择路由" v-if="state.permissionAddInfo.type===1">
            <el-cascader
                         collapse-tags
                         collapse-tags-tooltip
                         clearable
                         style="width: 100%;"
                         @change="change"
                         :props="{value:'id',label:'title',lazy:true,lazyLoad:lazyLoad,multiple:false}">
              <template #default="{ node, data }">
                <span>{{ data.title }} {{data.path}}</span>
              </template>
            </el-cascader>
          </el-form-item>

          <el-form-item label="接口路径" v-if="state.permissionAddInfo.type===3">
            <el-input v-model="state.permissionAddInfo.path"></el-input>
          </el-form-item>

        </el-form>
        <el-row style="display: flex;justify-content: space-between;margin-left: 120px">
          <el-button style="margin-right: 10px" size="large" type="primary" :icon="CirclePlus" @click="submitForm(formRef)">添加</el-button>
          <el-button style="margin-left: 10px" size="large" type="warning" :icon="Delete" @click="resetForm(formRef)">清空</el-button>
        </el-row>
      </el-card>

    </el-row>

    <guigu-loading :is-loading="state.isAdding" text="正在添加，请稍等..."/>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import GuiguLoading from "@/components/GuiguLoading/index.vue";
import {reactive, ref} from "vue";
import {CirclePlus,Delete} from "@element-plus/icons-vue";
import {listRoutes, queryLevelList, queryLevelMenu} from "@/api/backend/route/route.js";
import {treeify} from "@/api/util/route.js";
import {createPermission} from "@/api/backend/permission/permission.js";
import {ElMessage} from "element-plus";

const formRef=ref()
const rules=[]
const state=reactive({
  isAdding:false,
  permissionAddInfo:{isMenu:0,type:0,routeId:null,permissionCode:'',permissionName:'',desc:'',path:''},
  routeOptions:[]
})
const router=useRouter()

const onTypeChange=(type)=>{
  switch (type){
    case 1: getRoutes()
  }
}
const getRoutes=()=>{
  listRoutes().then(res=>{
    const resultList=res.data

    //找出所有的根节点
    const routes=resultList.filter(item=>item.parentId===0)
    treeify(routes,resultList)
    state.routeOptions=routes
  }).finally(()=>{
  })
}

const  lazyLoad=(node, resolve)=> {
  const { level,root ,data} = node

  queryLevelList(root?0:data.id)
      .then(res=>{
        const haha=res.data
        resolve(haha.map(item=>({...item,leaf:item.isLeaf===1})))
      })
}

const  lazyLoadMenu=(node, resolve)=> {
  const { level,root ,data} = node

  queryLevelMenu(root?0:data.id)
      .then(res=>{
        const haha=res.data
        resolve(haha.map(item=>({...item,leaf:item.isMenuLeaf===1})))
      })
}


const change=(value)=>{
  const [lastValue] = value.slice(-1);
  state.permissionAddInfo.routeId=lastValue
}


const submitForm= formRef=>{
  createPermission(state.permissionAddInfo).then(res=>{})
      .catch(error=>{
        ElMessage({
          type:"error",
          message:error.msg
        })
      })
}

const resetForm= formRef=>{

}


</script>

<style scoped>

</style>